<template>
  <el-dialog
    title="设计器"
    width="90%"
    height="90%"
    :visible.sync="dialogVisible"
    @close="closeDialog"
  >
    <fm-generate-form
      :data="jsonData"
      :remote="remoteFuncs"
      :value="editData"
      ref="generateForm"
    >
    </fm-generate-form>
  </el-dialog>
</template>

<script>
export default {
  name: 'FMGenerator',
  data() {
    return {
      dialogVisible: true,
      jsonData: {
        list: [
          {
            type: 'input',
            icon: 'icon-input',
            options: {
              width: '100%',
              defaultValue: '',
              required: false,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              disabled: false,
              maxlength: -1,
              showWordLimit: false,
              remoteFunc: 'func_1703670296000_5958'
            },
            name: '单行文本',
            key: '1703670296000_5958',
            model: 'text1',
            rules: [{ type: 'string', message: '单行文本格式不正确' }]
          },
          {
            type: 'textarea',
            icon: 'icon-diy-com-textarea',
            options: {
              width: '100%',
              defaultValue: '',
              required: false,
              disabled: false,
              pattern: '',
              placeholder: '',
              maxlength: -1,
              showWordLimit: false,
              remoteFunc: 'func_1703670297000_59193'
            },
            name: '多行文本',
            key: '1703670297000_59193',
            model: 'text2',
            rules: []
          },
          {
            type: 'grid',
            icon: 'icon-grid-',
            columns: [
              {
                span: 12,
                list: [
                  {
                    type: 'input',
                    icon: 'icon-input',
                    options: {
                      width: '100%',
                      defaultValue: '',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      disabled: false,
                      maxlength: -1,
                      showWordLimit: false,
                      remoteFunc: 'func_1703670313000_76172'
                    },
                    name: '单行文本',
                    key: '1703670313000_76172',
                    model: 'text3',
                    rules: [{ type: 'string', message: '单行文本格式不正确' }]
                  }
                ]
              },
              {
                span: 12,
                list: [
                  {
                    type: 'textarea',
                    icon: 'icon-diy-com-textarea',
                    options: {
                      width: '100%',
                      defaultValue: '',
                      required: false,
                      disabled: false,
                      pattern: '',
                      placeholder: '',
                      maxlength: -1,
                      showWordLimit: false,
                      remoteFunc: 'func_1703670319000_99680'
                    },
                    name: '多行文本',
                    key: '1703670319000_99680',
                    model: 'text4',
                    rules: []
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1703670311000_73193'
            },
            name: '栅格布局',
            key: '1703670311000_73193',
            model: 'grid_1703670311000_73193',
            rules: []
          }
        ],
        config: { labelWidth: 100, labelPosition: 'right', size: 'small' }
      },
      editData: {},
      remoteFuncs: {}
    };
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog');
    }
  }
};
</script>

<style></style>
